<template>
  <div class="page-container app_content">
    <!-- 固定顶部 -->
    <div class="header_body">
      <van-nav-bar>
        <template #title>
          <h3>{{ title }}</h3>
        </template>
      </van-nav-bar>
    </div>
    <!-- 中间可滚动内容 -->
    <div class="warp_body">
      <div class="scroll-wrapper">
        <component
          :is="pageName"
          :login-user="loginUserInfo"
          ref="reportContent"
        ></component>
      </div>
    </div>
    <!-- 固定底部 -->
    <div class="footer_body">
      <van-tabbar v-model="active" @change="onTabChange">
        <van-tabbar-item icon="cash-o">
          收支公开
        </van-tabbar-item>
        <van-tabbar-item icon="notes-o">重大事项</van-tabbar-item>
        <van-tabbar-item icon="friends-o">年度公开</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import Income from '@/components/income/Income.vue';
import ImportantMatter from '@/components/importantMatter/ImportantMatter.vue';
import AnnualDisclosure from '@/components/annualDisclosure/AnnualDisclosure.vue';
import { LoginUser } from '@/interface/home';
import { Toast } from 'vant';

const router = useRouter();

const components = [
  Income,
  ImportantMatter,
  AnnualDisclosure
];

const loginUserInfo = ref<LoginUser>({
  idCard: '',
  orgCode: ''
});

const active = ref(0);
const pageName = ref<any>(null);
const title = ref('收支公开');

const tabList = [
  {
    name: 'Income',
    label: '收支公开',
  },
  {
    name: 'ImportantMatter',
    label: '重大事项',
  },
  {
    name: 'AnnualDisclosure',
    label: '年度公开',
  },
];

onMounted(() => {
  const loginUser = sessionStorage.getItem('loginUser');
  if (!loginUser) {
    Toast('请先登录');
    router.push({
      path: '/',
    });
    return;
  }
  loginUserInfo.value = JSON.parse(loginUser);
  pageName.value = components[0];
});

const onTabChange = (val: number) => {
  const tab = tabList[val];
  if (tab) {
    pageName.value = components[val];
    title.value = tab.label;
  }
}

</script>

<style scoped lang="less">
.page-container {
  display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: #f4f4f4;
}

.app_content{
  overflow: hidden;
}

.header_body {
  height: 46px;
}

.warp_body{
  overflow-y: hidden;
  background-color: #f4f4f4;
  flex: 1;
}

.footer_body{
  height: 50px;
}

.scroll-wrapper {
  overflow: hidden;
  height: 100%;
}

</style>
